<template>
	<div>
		<van-sticky>
			<div class="menu_nav">
				<div class="menu_search" @click="$router.push({name: 'search'})">
					<van-search
					  shape="round"
					  placeholder="请输入搜索关键词"
					/>
				</div>
				<div class="menu_option">
					<div class="menu_item" v-for="(item,index) in menuOptions" :key="index" @click="toggletab(index,item.type)">
						<div :class="['m_item', menuIndex === index ? 'active' : '']">
							<div class="m_icon">
								<img :src="menuIndex === index ? item.activeIcon : item.activeIconInit">
							</div>
							<div class="m_text">{{item.title}}</div>
						</div>
					</div>
				</div>
			</div>
		</van-sticky>
	</div>
</template>

<script>
	import { getLabelType } from '@/api/menu.js'
	import bus from '@/utils/eventBus.js'
	export default {
		data () {
			return {
				menuIndex: 0,
				menuOptions: [
					{
						title: '推荐',
						activeIconInit: require('@/assets/images/icons_09.gif'),
						activeIcon: require('@/assets/images/icons_21.gif')
					},
					{
						title: '拿铁',
						activeIconInit: require('@/assets/images/icons_05.gif'),
						activeIcon: require('@/assets/images/icons_19.gif')
					},
					{
						title: '咖啡',
						activeIconInit: require('@/assets/images/icons_03.gif'),
						activeIcon: require('@/assets/images/icons_18.gif')
					},
					{
						title: '瑞纳冰',
						activeIconInit: require('@/assets/images/icons_07.gif'),
						activeIcon: require('@/assets/images/icons_20.gif')
					}
				]
			}
		},
		created() {
			this._get_label_type()
		},
		methods: {
			// label 点击事件
			toggletab(index,type) {
				if (index === this.menuIndex) return
				this.menuIndex = index
				// 通知列表组件
				bus.$emit('labelClick', type)
			},
			// 获取label的type
			_get_label_type () {
				getLabelType()
				.then(({data: res}) => {
					console.log('_get_label_type',res)
					// 判断状态码
					if (res.code !== 400) return this.$toast.fail('请求异常,请重新尝试!')
					let label = res.result
					label.unshift({
						type: "isHot",
						typeDesc: "推荐"
					})
					this.menuOptions.forEach(menuItem => {
						label.forEach(labelItem => {
							if(menuItem.title === labelItem.typeDesc) return menuItem.type = labelItem.type
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu_nav{
		.menu_option{
			background-color: #fbfbfb;
			display: flex;
			.menu_item{
				flex: 1;
				height: 65px;
				display: flex;
				align-items: center;
				justify-content: center;
				.m_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.m_icon{
						width: 35px;
						height: 35px;
						img{
							width: 100%;
						}
					}
					.m_text{
						font-size: 14px;
						margin-top: 5px;
					}
					&.active{
						.m_text{
							color: #0a34b9;
						}
					}
				}
			}
		}
	}
</style>